<!--
**********************************************************
* @Author: 张小平
* @Date:   2024-05-01
* @Email:  qqshuqian@163.com
* @Last modified: 最后修改日期
* @Description: 文件描述
**********************************************************
-->
<template>
  <div class="avue-top2" :class="[{ 'avue-top': !setting.topbar }]">
    <div class="top-bar__left">
      <div class="avue-breadcrumb" :class="[{ 'avue-breadcrumb--active': isCollapse }]"
        v-if="setting.collapse && setting.sidebar !== 'horizontal'">
        <i class="icon-navicon" @click="setCollapse"></i>
      </div>
    </div>

    <!--    <van-button  class="top-bar__left" style="left: 50px" v-if="isMobile" >-->
    <!--      <div class="avue-breadcrumb"  @click="setMac">-->
    <!--        <i class="icon-pingguo" ></i>-->
    <!--      </div>-->
    <!--    </van-button>-->

    <div class="top-bar__left" style="left: 50px; z-index: 99999" v-if="isMobile" @click="setMac">
      <div class="avue-breadcrumb">
        <i class="icon-pingguo"></i>
      </div>
    </div>
    <div class="top-bar__title">
      <top-menu ref="topMenu" v-if="setting.menu"></top-menu>
      <top-search class="top-bar__item" v-if="setting.search"></top-search>
    </div>
    <div class="top-bar__right">
      <div v-if="setting.lock" class="top-bar__item">
        <top-lock></top-lock>
      </div>
      <div v-if="setting.theme" class="top-bar__item">
        <top-theme></top-theme>
      </div>
      <div class="top-bar__item">
        <top-lang></top-lang>
      </div>
      <div class="top-bar__item" v-if="setting.fullscren">
        <top-full></top-full>
      </div>
      <div class="top-bar__item" v-if="setting.debug">
        <top-logs></top-logs>
      </div>
      <div class="top-bar__item">
        <top-notice></top-notice>
      </div>
      <div class="top-user" :class="{ 'avue-role-collapse': isCollapse }">
        <avue-input-tree v-if="!userInfo.showOrg" style="width: 200px" default-expand-all v-model="userInfo.trrId"
          :dic="roles"></avue-input-tree>

        <img class="top-bar__img" :src="userInfo.avatar || '/img/userPic.png'" />
        <el-dropdown>
          <span class="el-dropdown-link">
            {{ userInfo.displayName || userInfo.phone || '匿名' }}
          </span>

          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item>
                <router-link to="/">{{ $t('navbar.dashboard') }}</router-link>
              </el-dropdown-item>
              <el-dropdown-item>
                <router-link to="/info/index">{{
                  $t('navbar.userinfo')
                  }}</router-link>
              </el-dropdown-item>
              <el-dropdown-item v-if="userInfo.showOrg" @click="showChangeOrgs" divided>{{ showDisplayNameOrg }}
              </el-dropdown-item>
              <el-dropdown-item @click="logout" divided>{{
                $t('navbar.logOut')
                }}</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
        <top-setting></top-setting>
      </div>
    </div>
  </div>
  <div></div>

  <el-button class="setting-icon" @click="dialogChatVisible = true" type="primary" style="margin-bottom: -100px"
    circle><el-icon>
      <ChatLineSquare />
    </el-icon></el-button>
  <el-dialog v-model="dialogChatVisible" class="chatdialog" v-if="dialogChatVisible" title="AI助手"
    style="max-width: 460px">
    <iframe class="chatiframe" src="/chat?v=1" allow="camera;encrypted-media"></iframe>
  </el-dialog>

  <el-dialog v-model="dialogOrgVisible" v-if="dialogOrgVisible" title="切换机构角色" style="max-width: 460px">
    <top-org></top-org>
  </el-dialog>
</template>
<script>
import { mapGetters } from 'vuex'
import topLock from './top-lock.vue'
import topMenu from './top-menu.vue'
import topSearch from './top-search.vue'
import topTheme from './top-theme.vue'
import topLogs from './top-logs.vue'
import topLang from './top-lang.vue'
import topNotice from './top-notice.vue'
import topFull from './top-full.vue'
import topSetting from '../setting.vue'
import topOrg from './top-org.vue'
import { setStore, getStore } from '@/framework-core/utils/store'
import { hasMobile, setTheme } from '@/framework-core/utils/util'

export default {
  components: {
    topLock,
    topMenu,
    topOrg,
    topSearch,
    topTheme,
    topLogs,
    topLang,
    topFull,
    topNotice,
    topSetting,
  },
  name: 'top',
  data () {
    return {
      tenant: 2,
      isMobile: false,
      dialogChatVisible: false,
      dialogOrgVisible: false,
      showDisplayNameOrg: '匿名',
      isMac: false,
    }
  },
  filters: {},
  created () {
    if (!this.isMobile && hasMobile()) {
      this.isMobile = hasMobile()
      this.setMyTheme()
    }
    if (this.roles && this.userInfo.trrId) {
      this.roles.forEach((ele) => {
        if (ele.value == this.userInfo.trrId) {
          this.showDisplayNameOrg = ele.label
        }
      })
    }
  },
  computed: {
    ...mapGetters([
      'setting',
      'userInfo',
      'roles',
      'tagWel',
      'tagList',
      'isCollapse',
      'tag',
      'logsLen',
      'logsFlag',
      'isHorizontal',
    ]),
  },
  // watch: {
  //   'userInfo.tokenUser.trrId'(newVal, oldVal) {
  //     // 业务代码
  //     this.$confirm("","test");
  //   }
  // },
  watch: {
    'userInfo.trrId': {
      handler () {
        // this.userInfo.trrId = this.$refs.tree.getHalfList();
        // this.$confirm("",this.userInfo.tokenUser.trrId);
        //alert(1111)
        if (!this.userInfo) {
          //lert(JSON.stringify(this.userInfo))
          this.userInfo = {}
        } else {
          if (this.userInfo.trrId != getStore({ name: 'currentTrrId' })) {
            setStore({ name: 'currentTrrId', content: this.userInfo.trrId })
            if (this.userInfo.trrId) {
              this.$store
                .dispatch('switchTenatRole', this.userInfo)
                .then(() => {
                  this.$store.commit('DEL_ALL_TAG')

                  // this.$router.push({ path: "/" });
                  window.location.href = '/'
                })
            }
          } else {
            //  alert("role:"+this.roles.length)
            this.dialogOrgVisible = false
          }
        }
      },
    },
  },

  // mounted () {
  //   this.userInfo.trrId = this.$refs.tree.getHalfList();
  // },
  methods: {
    setCollapse () {
      this.$store.commit('SET_COLLAPSE')
    },
    setMac () {
      this.isMac = !this.isMac
      this.setMyTheme()
    },
    setMyTheme () {
      var theme = ''
      if (this.isMac) {
        theme = 'mac-os'
      } else {
        theme = 'default'
      }
      this.$store.commit('SET_THEME_NAME', theme)
      setTheme(theme)
      if (this.isMac) {
        window.location.href = '/'
        // this.$router.push( "/" );
        //location.reload();
      }
    },
    //
    showChangeOrgs () {
      this.dialogOrgVisible = true
    },
    logout () {
      this.$confirm(this.$t('logoutTip'), this.$t('tip'), {
        confirmButtonText: this.$t('submitText'),
        cancelButtonText: this.$t('cancelText'),
        type: 'warning',
      }).then(() => {
        this.$store.dispatch('LogOut').then(() => {
          this.$router.push({ path: '/login' })
        })
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.avue-role-collapse {
  display: none;
}

/** 表格数据量大时抬头有问题*/
.avue-top {
  padding-bottom: 50px !important;
}

.chatdialog .el-dialog__body {
  padding: calc(var(--el-dialog-padding-primary) + -20px) var(--el-dialog-padding-primary) !important;
  color: var(--el-text-color-regular);
  font-size: var(--el-dialog-content-font-size);
  word-break: break-all;
}

.el-dialog__body {
  padding: calc(var(--el-dialog-padding-primary) + -20px) var(--el-dialog-padding-primary) !important;
  color: var(--el-text-color-regular);
  font-size: var(--el-dialog-content-font-size);
  word-break: break-all;
}

.el-overlay-dialog {
  position: fixed;
  top: 0;
  right: 0;
  bottom: -100px !important;
  left: 1px !important;
  overflow: auto;
}

.el-dialog {
  width: 460px !important;
}

.chatdialog {
  width: 460px;
}

.chatiframe {
  width: 420px;
  min-height: 580px;
  border: none;
}

@media (max-width: 992px) {
  .chatiframe {
    width: 90vw !important;
    min-height: 60vh !important;
  }

  .top-user {
    width: 80vw;
  }
}
</style>
